<template>
  <div class="app-container">
    <div class="titleInfo">
      <el-image :src="deliveryDetailData.detail.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
      <div class="carinfo">
        <p>姓名:{{ deliveryDetailData.detail.fullName }}</p>
        <p>
          电话:{{ deliveryDetailData.detail.phonenumber
          }}<el-button link type="primary" v-copy="deliveryDetailData.detail.phonenumber" :icon="DocumentCopy"></el-button>
        </p>
      </div>
      <div class="carinfo">
        <p>上岗时间:{{ deliveryDetailData.detail.entryDate }}</p>
        <p>补贴金额:<el-switch size="small" v-model="switchStatus" @change="handleSwitchChange"></el-switch></p>
      </div>
      <div class="carinfo">
        <p>所属驿站:{{ deliveryDetailData.detail.stageName }}</p>
        <p>
          零时借调:{{ deliveryDetailData.detail?.stageName
          }}<el-button
            type="text"
            size="small"
            @click="
              router.push({
                path: '/cityLevel/cityOrganization/cityDelivery/transferSite',
                query: { id: route.query.id }
              })
            "
            >借调
          </el-button>
        </p>
      </div>
      <div class="carinfo">
        <p>
          当前状态:<el-switch
            size="small"
            disabled
            :v-model="deliveryDetailData.detail.status"
            :active-value="0"
            :inactive-value="1"
          ></el-switch>
        </p>
        <p>
          <el-button
            type="danger"
            size="small"
            round
            @click="router.push({ path: '/cityLevel/cityOrganization/cityDelivery/logoutTip', query: { id: route.query.id } })"
            >注销账号</el-button
          >
        </p>
      </div>
    </div>
    <div class="baicInfo">
      <div>
        <div>身份证<span>(目前仅支持中国大陆居民身份证)</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="detailData"
          >
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="出生日期" prop="birthday" />
            <el-table-column label="身份证号" prop="idCardNo" />
            <el-table-column label="身份证头像面" prop="idCardHeadPhoto">
              <template #default="scope">
                <el-image :src="scope.row.idCardHeadPhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="身份证国徽面" prop="idCardBackPhoto">
              <template #default="scope">
                <el-image :src="scope.row.idCardBackPhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="个人形象照" prop="personalImagePhoto">
              <template #default="scope">
                <el-image :src="scope.row.personalImagePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="证件有效期" prop="idCardValidityStartTime">
              <template #default="scope">
                {{ scope.row.idCardValidityStartTime }} - {{ scope.row.idCardValidityEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" />
          </el-table>
        </div>
        <div>健康证</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="healthCertificateData"
          >
            <el-table-column label="资质名称" prop="healthCertificateName" />
            <el-table-column label="有效时间" prop="validStartTime">
              <template #default="scope"> {{ scope.row.validStartTime }} - {{ scope.row.validEndTime }} </template>
            </el-table-column>
            <el-table-column label="证件状态" prop="status" />
            <el-table-column label="证件照片" prop="healthCertificateUrl">
              <template #default="scope">
                <el-image :src="scope.row.healthCertificateUrl" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>驾驶信息<span>（同一配送员可有多张驾驶证）</span></div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="deliveryDetailData.driverLicense"
          >
            <el-table-column label="驾驶证类型" prop="drivingLicenseTypeName" />
            <el-table-column label="驾驶证图片" prop="drivingLicensePhoto">
              <template #default="scope">
                <el-image :src="scope.row.drivingLicensePhoto" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="驾驶证号" prop="drivingLicenseNo" />
            <el-table-column label="驾驶证年龄" prop="drivingLicenseYears" />
            <el-table-column label="实际驾龄" prop="actualDrivingYears" />
            <el-table-column label="驾驶证有效期" prop="drivingLicenseValidityStartTime">
              <template #default="scope">
                {{ scope.row.drivingLicenseValidityStartTime }} - {{ scope.row.drivingLicenseValidityEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" />
          </el-table>
        </div>
        <div>
          关联车辆<span>（可关联不需要驾驶证类型的车辆，可关联当前驾驶员驾驶证对应的车辆）</span
          ><el-button size="small" type="primary" link @click="handleAddVehicle">关联车辆</el-button>
        </div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              fontWeight: '100',
              fontSize: '13px',
              color: 'white',
              backgroundColor: '#009688'
            }"
            style="width: 100%"
            :data="vehicle"
          >
            <el-table-column label="车辆类型" prop="vehicleTypeName" />
            <el-table-column label="车辆编号/车牌号" prop="vehicleCode">
              <template #default="scope">
                {{ scope.row.vehicleCode + "/" + scope.row.vehicleNumber }}
              </template>
            </el-table-column>
            <el-table-column label="车辆图片" prop="vehicleTypeFrontalView">
              <template #default="scope">
                <el-image :src="scope.row.vehicleTypeFrontalView" style="width: 100px; vertical-align: middle" fit="fill" />
              </template>
            </el-table-column>
            <el-table-column label="所需驾驶证类型" prop="driverLicenseTypeName" />
            <el-table-column label="车辆押金" prop="vehicleDeposit">
              <template #default="scope">
                <el-select @change="upDeposit" v-model="scope.row.vehicleDeposit" placeholder="请选择">
                  <el-option value="500" label="500元"></el-option>
                  <el-option value="1000" label="1000元"></el-option>
                  <el-option value="1500" label="1500元"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="车辆使用费" prop="vehicleUsageFee">
              <template #default="scope">
                <el-select @change="upCost" v-model="scope.row.vehicleUsageFee" placeholder="请选择">
                  <el-option value="5" label="5元/天"></el-option>
                  <el-option value="10" label="10元/天"></el-option>
                  <el-option value="15" label="15元/天"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" link @click="handleRemoveCar(scope.row)">删除</el-button>
                <el-button type="primary" size="small" link @click="handleUpdateDeposit(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="examineDetail">
import { Delivery } from "@/api/interface/city/organizationManage";
import {
  getDeliveryDetailAPI,
  removeRelateVehicleAPI,
  updateDepositAPI,
  updateOnDutyTimeAPI
} from "@/api/modules/city/organizationAPI";
import { DocumentCopy } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const deliveryDetailData = ref<Delivery.DetailData>({
  detail: {
    userId: 1,
    fullName: "string",
    userName: "string",
    age: -2147483648,
    sex: "string",
    birthday: "2019-08-24T14:15:22.123Z",
    idCardNo: "string",
    phonenumber: "string",
    status: "0",
    reason: "string",
    auditStatus: "0",
    delFlag: "0",
    idCardAuditStatus: "0",
    idCardValidityStatus: "s",
    idCardValidityStartTime: "2019-08-24T14:15:22.123Z",
    idCardValidityEndTime: "2019-08-24T14:15:22.123Z",
    entryDate: "2019-08-24",
    leaveDate: "2019-08-24",
    idCardHeadPhoto: "string",
    idCardBackPhoto: "string",
    personalImagePhoto: "string",
    subsidyAmountStatus: -2147483648,
    workingStatus: -2147483648,
    stageName: "string",
    secondStageList: [
      {
        stageId: "string",
        stageName: "string"
      }
    ]
  },
  healthCertificate: {
    id: 1,
    validStartTime: "2019-08-24T14:15:22.123Z",
    validEndTime: "2019-08-24T14:15:22.123Z",
    status: 1,
    healthCertificateUrl: "string"
  },
  driverLicense: [
    {
      id: 1,
      drivingLicenseTypeName: "string",
      drivingLicensePhoto: "string",
      drivingLicenseNo: "string",
      drivingLicenseYears: "string",
      actualDrivingYears: "string",
      drivingLicenseValidityStartTime: "2019-08-24T14:15:22.123Z",
      drivingLicenseValidityEndTime: "2019-08-24T14:15:22.123Z",
      status: 1
    }
  ],
  vehicle: {
    id: 1,
    vehicleTypeName: "string",
    vehicleCode: "string",
    vehicleNumber: "string",
    vchicleDepositId: -2147483648,
    vehicleDeposit: 0,
    vehicleUsageFee: 0,
    vehicleUsageFeeId: -2147483648,
    vehicleTypeFrontalView: "string",
    vehicleTypeBackView: "string",
    vehicleTypeLeftView: "string",
    vehicleTypeRightView: "string",
    driverLicenseTypeName: "string"
  }
});
const switchStatus = ref<boolean>(false);

const detailData = ref<Delivery.Detail[]>([]);
const healthCertificateData = ref<Delivery.HealthCertificate[]>([]);
const vehicle = ref<Delivery.Vehicle[]>([]);
const examineDepositParams = ref<Delivery.ExamineDepositParams>({});
const handleSwitchChange = () => {
  if (switchStatus.value) {
    ElMessageBox.confirm("确认补贴该用户吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        updateOnDutyTime(1);
      })
      .catch(() => {
        console.log("取消操作");
      });
  } else {
    ElMessageBox.confirm("确认取消补贴该用户吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        updateOnDutyTime(2);
      })
      .catch(() => {
        console.log("取消操作");
      });
  }
};
const upDeposit = () => {
  examineDepositParams.value.type = "1";
};
const upCost = () => {
  examineDepositParams.value.type = "2";
};
const handleUpdateDeposit = (row: Delivery.Vehicle) => {
  if (examineDepositParams.value.type === undefined) {
    ElMessage.error("请选择修改的押金或者使用费");
    return;
  }
  examineDepositParams.value = {
    id: row.id,
    vehicleDeposit: row.vehicleDeposit,
    vehicleUsageFee: row.vehicleUsageFee
  };
  ElMessageBox.confirm("确认修改该用户押金吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      updateDeposit();
    })
    .catch(() => {
      ElMessage.error("取消操作");
    });
};
const handleRemoveCar = (row: Delivery.Vehicle) => {
  ElMessageBox.confirm("确认删除该用户关联车辆吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      removeRelateVehicle(row.id);
    })
    .catch(() => {
      ElMessage.error("取消操作");
    });
};
const handleAddVehicle = () => {
  router.push({ path: "/cityLevel/cityOrganization/cityDelivery/accCar", query: { id: route.query.id } });
};
const getDeliveryDetailData = async (userId: number) => {
  const { code, data, msg } = await getDeliveryDetailAPI(userId);
  if (code == "200" && data) {
    if (data.detail.subsidyAmountStatus == 1) {
      switchStatus.value = true;
    } else {
      switchStatus.value = false;
    }
    deliveryDetailData.value = data;
    if (data.detail) {
      detailData.value.push(data.detail);
    }
    if (data.healthCertificate) {
      healthCertificateData.value.push(data.healthCertificate);
    }
    if (data.detail.vehicle) {
      vehicle.value = data.detail.vehicle;
    }
  } else {
    ElMessage.error(msg);
  }
};
const updateDeposit = async () => {
  const { code, msg } = await updateDepositAPI(examineDepositParams.value);
  if (code == "200") {
    ElMessage.success("修改押金成功");
  } else {
    ElMessage.error(msg);
  }
};
const removeRelateVehicle = async (id: number) => {
  const { code, msg } = await removeRelateVehicleAPI({ id });
  if (code == "200") {
    ElMessage.success("删除成功");
  } else {
    ElMessage.error(msg);
  }
};
const updateOnDutyTime = async (subsidyAmountStatus: number) => {
  const { code, msg } = await updateOnDutyTimeAPI({ userId: Number(route.query.id), subsidyAmountStatus });
  if (code == "200") {
    ElMessage.success("修改成功");
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDeliveryDetailData(Number(route.query.id));
});
</script>

<style lang="scss" scoped>
body {
  .app-container {
    padding: 15px;
    background-color: white;
  }

  font-size: 13px;
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
    .carinfo {
      display: inline-block;
      padding: 0;
      margin-right: 11.59%;
      margin-left: 15px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
      p {
        // padding: 10px 0;
        height: 40px;
        margin: 0;
        line-height: 40px;
        vertical-align: middle;
        .el-button {
          margin-left: 5px;
        }
        .el-switch {
          padding: 0;
          margin-left: 5px;
        }
      }
    }
    .carstatus {
      display: inline-block;
      float: right;
      margin-right: -135px;
      font-size: 13px;
      color: gray;
      vertical-align: middle;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
  .btn-container {
    text-align: right;
  }
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
